<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/common.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<base href="${contextPath}"/>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="/resources/assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="/resources/assets/css/style.css" rel="stylesheet" media="screen">
    <link href="/resources/assets/css/main.css" rel="stylesheet" media="screen">
    <link href="/resources/assets/css/font-awesome.css" rel="stylesheet"> 
    <link href="/resources/assets/css/koala.css" rel="stylesheet">
    <link href="/resources/assets/plugins/bootstrap-dialog/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />

    <link href="/resources/assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css" />
    <link href="/resources/assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css" />

    <link href="/resources/assets/plugins/jPaging/jBootsrapPage.css" rel="stylesheet" type="text/css" />

</head>
<body>
<nav id="navbar" class="navbar" role="navigation">
  <!-- <div class="container">
  <div class="navbar-header"> -->
    <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button> -->
    <img src="/resources/assets/img/top.png" style="width:100%">
  <!--   <div class="logo"></div> -->
  <!-- </div>
  </div> -->
</nav>
<jsp:include page="../layout/left.jsp"></jsp:include>
<div class="content" id="content0">
   <div class="mainbar">
       	<div class="matter">
          <div id="container">
             	<div class="widget">
             		<div class="widget-head">
                    <ul id="myTab" class="nav nav-tabs pull-left">
                    	<!-- 这里是Tab标题区 -->
                    </ul>
                       <div class="widget-icons pull-right">
                         <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                         <a href="#" class="wclose"><i class="icon-remove"></i></a>
                       </div>  
                    <div class="clearfix"></div>
                </div>

                <input type="hidden" id="hiddenEmployeeId" value="${param.employeeId}">
                <input type="hidden" id="hiddenEmployeeName" value="${param.employeeName}">
 

              <div id="myTabContent" class="tab-content widget-content">
                  	<!-- 这里是Tab内容区 -->
              </div>
              </div>
         	</div>
        </div>
	
   </div>
</div>
<footer style="height:0">
</footer>
  <script src="/resources/assets/js/jquery.js"></script>
<!--   <script src="./js/jquery_ui/jquery-ui.js" type="text/javascript"></script> -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="/resources/assets/js/custom.js"></script> <!-- Custom codes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- 	<script src="js/jquery_005.js"></script> jQuery -->
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="/resources/assets/js/bootstrap.min.js"></script>


  <script src="/resources/assets/plugins/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
  <script src="/resources/assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
  <script src="/resources/assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<!--   <script src="./js/koala_tree.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_combobox.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_datetimepicker.js" type="text/javascript" ></script> -->
<!--   <script src="./js/koala_layout.js" type="text/javascript" ></script> -->
<!--   <script src="./js/koala_richeditor.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_grid.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_wizard.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ColorPicker.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Tab.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_AutoComplete.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Slider.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ProgressBar.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Button.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ToolBar.js" type="text/javascript"></script> -->
<!--   <script src="./js/data.js" type="text/javascript"></script>   -->


<script src="/resources/assets/js/Koala_Grid.js" type="text/javascript" ></script>
<script src="/resources/assets/js/Koala_Select.js" type="text/javascript" ></script>

<script src="/resources/assets/js/chenghong/Date.js"></script>


<script src="/resources/assets/plugins/jPaging/jBootstrapMonthPage.js"></script>
<script src="/resources/assets/plugins/jPaging/jBootstrapPage.js"></script>
<script src="/resources/assets/plugins/jPaging/jRemoteValidate.js"></script>
  <script type="text/javascript">

//定义一些事件
  $(function(){
	//var $selectedTab;
  	$("a[load-html]").click(function(){
  		try {
  			var title = $(this).html();
  	  		var tag = $(this).attr("tag");
  	  		var url = $(this).attr("load-html");
  	  		var $myTabContent = $("#myTabContent");
  	  		var $tabHref = $("#myTab > li > a[href=#" + tag + "]");
  	  		
  	  		//如果检测到存在的tab，则加载内容，并切换激活状态
  	  		if($tabHref.length) {
  	  			//if($selectedTab.attr("href") != $tabHref.attr("href")) {
  	  				//$selectedTab = $tabHref;
  	  				$("#myTab > li").removeClass("in").removeClass("active");
  	  				$tabHref.parent().addClass("active").addClass("in");
  	  				$myTabContent.load(url);
  	  			//}
  	  			
  	  			return false;
  	  		}
  	  		//add tab
  	  		$("#myTab").children("li").removeClass("active");
  	  		var $iClose = $('<i class="icon-remove tab-close"></i>');
  	  		var $aHref = $('<a href="#' + tag + '" data-toggle="tab">' + title + '</a>');
  	  		var $tab = $('<li class="active"></li>');
  	  		//$selectedTab = $aHref;
  	  		
  	  		$aHref.attr("link", url);
  	  		$aHref.append($iClose);
  	  		$tab.append($aHref);
  	  		$("#myTab").append($tab);

  	  		//添加一个TabContent
  	  		$myTabContent.children("div .tab-pane").removeClass("in").removeClass("active");
  	  		$myTabContent.load(url);
  	  		
  	  		//切换tab事件
  	  		$("#myTab > li > a").click(function() {
  	  			//if($selectedTab.attr("href") != $(this).attr("href")) {
  	  				//$selectedTab = $(this);
  	  				var url = $(this).attr('link');
  	  				if(url) $myTabContent.load(url);
  	  			//}
  	  		});
  	  		
  	  		//关闭事件
  	    	$("#myTab > li > a > i").click(function(){
  	    		closeTabAndContent($(this));
  	    	});
		} catch (e) {
			alert(e.message);
		}
  	})
  });
	
	//点击了X之后，关闭本身的tab和清理对应内容区
	 function closeTabAndContent($obj){
		var $p = $obj.parent();
		//获取li
		var $pp = $p.parent();
		var $next = $pp.next();
		//如果是最后一个子的，则第一个为激活
		if(!$pp.siblings("li").length){
			return false;
		}
		if(!$next.length){
			$next = $pp.parent().find(":first-child");
		}
		var tabContentId = $p.attr("href");
		
		if($next.length){
	  		$(tabContentId).remove();
	  		$pp.remove();
	  		//$next.children("a").trigger("click");
	  		$("#myTab").children("li").removeClass("active");
	  		$next.addClass("active");
	  		var id = $next.children("a").attr("href");
	  		$(id).addClass("active").addClass("in");
		}
	}
  </script>
</body>
</html>
